<template>
    <div class="box1" @contextmenu.prevent="showMenu($event)">
        <el-table
            ref="multipleTable"
            :data="tableList1"
            style="width: 100%"
            height="100%"
            highlight-current-row
            @row-click="handleRowClick"
            @selection-change="handleSelectionChange"
            @header-click="handleHeadClick"
            v-loading="loading"
            element-loading-background="rgb(0,0,0,.4)"
        >
            <el-table-column type="selection" v-if="selection" width="44" />
            <el-table-column label="时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.time }}</span>
                    <span style="color: greenyellow; margin-left: 5px" v-if="scope.row.note && scope.row.note.length !== 0">({{ scope.row.note.length }})</span>
                </template>
            </el-table-column>
            <el-table-column label="值(rms)" prop="value" width="85" />
        </el-table>
        <el-pagination :page-size="pageSize" @current-change="handleChange" layout="total,prev,next,jumper" :total="tableList.length" :current-page="currentPage"></el-pagination>
        <vue-context-menu :contextMenuData="contextMenuData" />
    </div>
</template>

<script>
import { contextMenuData, menuList } from '../config'

export default {
    data() {
        return {
            contextMenuData: null,
            filterData: null,
            maxCount: 8,
            loading: false,
            checkedList: [],
            currentPage: 1,
            tableList1: [],
            size: 28,
        }
    },
    props: {
        tableList: {
            type: Array,
            default: [],
        },
        selection: {
            type: Boolean,
            default: false,
        },
        sensorInfo: {
            type: Object,
            default: null,
        },
    },
    watch: {
        tableList: {
            handler(newval) {
                this.currentPage =1
                this.tableList1 = this.getPageElements(newval, 1, this.size)
            },
        },
    },
    methods: {
        getPageElements(arr, page, size = 30) {
            const startIndex = (page - 1) * size
            const endIndex = startIndex + size
            return arr.slice(startIndex, endIndex)
        },
        handleChange(e) {
            this.tableList1 = this.getPageElements(this.tableList, e, this.size)
        },
        handleRowClick(row) {
            if (this.selection) this.$refs.multipleTable.toggleRowSelection(row)

            this.$emit('handleRowClick', row)
        },
        setCurrentRowEvent(row) {
            //设置高亮
            this.$refs.multipleTable.setCurrentRow(row)
        },

        handleHeadClick(e) {},
        showMenu(e) {
            // let x = e.clientX
            // let y = e.clientY
            // this.contextMenuData.axis = { x, y }
        },

        setCurrentRow(row) {
            this.$refs.multipleTable.setCurrentRow(row)
        },
        handleSelectionChange(selection) {
            let sl = selection.length
            let tl = this.tableList.length
            if (sl == tl) {
                if (sl >= this.maxCount) {
                    this.$refs.multipleTable.clearSelection()
                    this.$emit('clearData')
                } else this.$emit('handleSelectionChange', selection)
            } else if (sl < tl) {
                if (sl <= this.maxCount) this.$emit('handleSelectionChange', selection)
                else {
                    this.$message.info('选择数量过多')
                    this.toggleRowSelection(selection[sl - 1], false)
                }
            }
        },

        toggleRowSelection(a, boolean) {
            this.$refs.multipleTable.toggleRowSelection(a, boolean)
        },
        clearAllSelection() {
            this.$refs.multipleTable.clearSelection()
        },
        doLayout() {
            this.$refs.multipleTable.doLayout()
        },
    },
    created() {
        this.contextMenuData = contextMenuData
        this.contextMenuData.menulists = menuList['table']
    },
}
</script>

<style lang="less" scoped>
.box1 {
    width: 100%;
    height: calc(100% - 16px) !important;
    display: flex;
    flex-direction: column;

    .el-pagination {
    }
}
</style>
